<template>
  <div class="exception-table">
    <!-- 表格头部 -->
    <div class="table-header">
      <div class="header-cell time-col">时间</div>
      <div class="header-cell position-col">位置</div>
      <div class="header-cell pressure-col">压力值 (kPa)</div>
      <div class="header-cell status-col">状态</div>
      <div class="header-cell action-col">操作</div>
    </div>
    
    <!-- 表格内容 -->
    <div class="table-body">
      <div 
        v-for="(item, index) in data" 
        :key="index" 
        class="table-row"
        :class="{ 'row-hover': hoveredRow === index }"
        @mouseenter="hoveredRow = index"
        @mouseleave="hoveredRow = null"
      >
        <div class="body-cell time-col">{{ item.time }}</div>
        <div class="body-cell position-col">{{ item.position }}</div>
        <div class="body-cell pressure-col">
          <span class="pressure-value">{{ item.pressure }}</span>
        </div>
        <div class="body-cell status-col">
          <div class="status-badge" :class="getStatusClass(item.status)">
            {{ item.status }}
          </div>
        </div>
        <div class="body-cell action-col">
          <button 
            class="action-link" 
            @click="handleViewDetail(item)"
          >
            查看详情
          </button>
        </div>
      </div>
    </div>
    
    <!-- 空状态 -->
    <div v-if="!data || data.length === 0" class="empty-state">
      <div class="empty-icon">📊</div>
      <div class="empty-text">暂无异常数据</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ExceptionTable',
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      hoveredRow: null
    }
  },
  methods: {
    getStatusClass(status) {
      const statusMap = {
        '严重异常': 'critical',
        '轻微异常': 'warning',
        '正常': 'normal'
      }
      return statusMap[status] || 'normal'
    },
    
    handleViewDetail(item) {
      this.$emit('view-detail', item)
    }
  }
}
</script>

<style scoped>
.exception-table {
  width: 100%;
  background: #ffffff;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

/* 表格头部 */
.table-header {
  display: flex;
  background: #FAFAFA;
  border-bottom: 1px solid #F0F0F0;
}

.header-cell {
  padding: 8px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.88);
  line-height: 22px;
  display: flex;
  align-items: center;
  border-right: 1px solid #F0F0F0;
}

.header-cell:last-child {
  border-right: none;
}

/* 列宽定义 */
.time-col {
  width: 180px;
  flex-shrink: 0;
}

.position-col {
  width: 96px;
  flex-shrink: 0;
}

.pressure-col {
  width: 113px;
  flex-shrink: 0;
}

.status-col {
  width: 100px;
  flex-shrink: 0;
}

.action-col {
  width: 84px;
  flex-shrink: 0;
}

/* 表格主体 */
.table-body {
  max-height: 300px;
  overflow-y: auto;
}

.table-row {
  display: flex;
  border-bottom: 1px solid #F0F0F0;
  transition: background-color 0.2s;
}

.table-row:hover,
.table-row.row-hover {
  background: #f9fafb;
}

.table-row:last-child {
  border-bottom: none;
}

.body-cell {
  padding: 9px 8px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.88);
  line-height: 21px;
  display: flex;
  align-items: center;
  border-right: 1px solid #F0F0F0;
}

.body-cell:last-child {
  border-right: none;
}

/* 压力值样式 */
.pressure-value {
  font-weight: 700;
}

/* 状态标签 */
.status-badge {
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 21px;
  text-align: center;
  color: #FFFFFF;
  min-width: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.status-badge.critical {
  background: #FF4D4F;
}

.status-badge.warning {
  background: #FAAD14;
}

.status-badge.normal {
  background: #52C41A;
}

/* 操作链接 */
.action-link {
  background: none;
  border: none;
  color: #1677FF;
  font-size: 14px;
  line-height: 21px;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  transition: color 0.2s;
}

.action-link:hover {
  color: #0958d9;
  text-decoration: underline;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: #6b7280;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-text {
  font-size: 16px;
  color: #9ca3af;
}

/* 滚动条样式 */
.table-body::-webkit-scrollbar {
  width: 6px;
}

.table-body::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.table-body::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.table-body::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .table-header,
  .table-row {
    font-size: 12px;
  }
  
  .header-cell,
  .body-cell {
    padding: 6px 4px;
  }
  
  .time-col {
    width: 140px;
  }
  
  .position-col {
    width: 80px;
  }
  
  .pressure-col {
    width: 90px;
  }
  
  .status-col {
    width: 80px;
  }
  
  .action-col {
    width: 70px;
  }
  
  .status-badge {
    font-size: 12px;
    padding: 2px 6px;
    min-width: 48px;
  }
  
  .action-link {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .exception-table {
    overflow-x: auto;
  }
  
  .table-header,
  .table-row {
    min-width: 500px;
  }
  
  .empty-state {
    padding: 30px 15px;
  }
  
  .empty-icon {
    font-size: 36px;
    margin-bottom: 12px;
  }
  
  .empty-text {
    font-size: 14px;
  }
}

/* 打印样式 */
@media print {
  .action-col {
    display: none;
  }
  
  .table-row:hover,
  .table-row.row-hover {
    background: transparent;
  }
  
  .action-link {
    display: none;
  }
}
</style>
